<template>
    <div>
        <div class="column_box" @click="productClick(product.id)">
            <div class="column_img">
                <image style=" width: 350px;height: 360px;" :src="product.thumbnail"></image>
            </div>
            <div class="column_product">
                <div>
                    <text class="column_product_title">{{product.name}}</text>
                </div>
                <div>
                    <div style="position:relative;">
                        <activity v-if="product.coupons.length !=0 || product.promotions.length !=0" :tranString="310" :product =product :coupon="product.coupons"
                                  :promotions="product.promotions"></activity>
                    </div>

                    <div class="column_product_price_box">
                        <vip :tranString="280" :product =product :promotions="product.promotions" :marketPrice="product.marketPrice" :price="product.price"
                             :vipPrice="product.vipPrice" :point="product.point"></vip>
                        <div class="shoppingCartBox" @click="shoppingClick" >
                            <div class="shoppingCart">
                                <text class="addIcon">&#xe620;</text>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        add
    } from '../../api/cart.js'
    import
        activity
        from '../product_activity/product_activity.vue'
    import
        vip
        from '../product_activity/product_vip.vue'
    export default {
        data() {
            return {

            }
        },
        props: [
            'tageId', 'product'
        ],
        components: {
            activity,
            vip
        },
        created() {
            this.initIconFont()
        },
        methods: {
            shoppingClick() {
                var _this = this;
                //加入购物车的按键事件
                var quantity = 0
                if (this.minLimit > 0) {
                    quantity = this.product.minLimit
                } else {
                    quantity = 1
                }
                let data = {}
                data.productId = this.product.id
                data.promotionId = ""
                data.quantity = quantity
                data.uuid = this.getGlobalData().uuid
                add(data).then(
                    res => {
                        if (res.type == 'success') {
                            eeui.toast('添加购物车成功')
                            eeui.postMessage({
                                pageName: '',
                                key: 'orderIndex',
                            });
                        }
                    }
                ).catch(error => {
                })
            },
            productClick(data) {
                eeui.openPage({
                        params: data,
                        url: 'root://pages/goods/product/details.js',
                        statusBarType: 'immersion',
                        statusBarStyle: false
                    },
                    (result) => {

                    }
                );
            }
        }
    }
</script>

<style scoped>
    .column_box {
        width: 350px;
        border-radius: 6px;
        overflow: hidden;
        margin-top: 10px;
    }

    .column_img {
        width: 350px;
        height: 360px;
        overflow: hidden;
    }

    .column_product {
        padding: 20px;
        box-sizing: border-box;
        background-color: white;
        height: 236px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .column_product_header {
        display: flex;
        flex-direction: row;
    }

    .shoppingCartBox {
        width: 36px;
        height: 36px;
        position: absolute;
        right: 0px;
        bottom: 0px;
        /* display: flex;
      justify-content: center;
      align-items: center; */
        /* 	  padding-top: 20px;
      padding-left: 40px;
      padding-right: 20px;
      padding-bottom: 20px */
    }

    .shoppingCart {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-image: linear-gradient(to right, #F03215, #F4A319);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .addIcon {
        font-size: 24px;
        color: white;
        font-family: iconfont2;
    }

    .column_product_header_img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-right: 16px;
        margin-bottom: 10px;
    }

    .column_product_header_title {
        font-size: 20px;
        color: rgba(0, 0, 0, 0.5);
    }

    .column_product_title {
        width: 310px;
        display: block;
        /*font-size: 28px;*/
        font-size: 30px;
        line-height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        lines: 2;
    }

    .column_product_price_box {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
    }

    .column_product_price_newTitle {
        font-size: 28px;
        font-weight: bold;
        color: rgba(231, 91, 83, 1);
        margin-right: 10px;
    }

    .column_product_price_oldTitle {
        font-size: 24px;
        color: rgba(0, 0, 0, 0.5);
        text-decoration: line-through;
    }

    .column_coupon {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 10px;
    }

    .column_coupon_one {
        width: 100px;
        height: 32px;
        border-radius: 6px;
        /* background: linear-gradient(0deg, rgba(236, 95, 88, 1), rgba(255, 230, 230, 1)); */
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        border: 1px solid rgba(236, 95, 88, 1);
    }

    .column_coupon_one_title {
        font-size: 20px;
        color: rgba(236, 95, 88, 1);
        line-height: 32px;
        height: 32px;
        display: block;
    }

    .column_product_subtitle {
        font-size: 24px;
        color: rgba(0, 0, 0, 0.5);
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }
</style>
